<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>影视订阅下载管理系统</title>
    <link rel="icon" type="image/x-icon" href="./favicon.ico">
    <link href="./tailwind.min.css" rel="stylesheet">
    <link href="./all.min.css" rel="stylesheet">
    <style>
        .tab-content {
            display: none;
        }
        .tab-content.active {
            display: block;
        }
        .status-indicator {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 8px;
        }
        .status-active {
            background-color: #10b981;
            animation: pulse 2s infinite;
        }
        .status-inactive {
            background-color: #ef4444;
        }
        .status-waiting {
            background-color: #f59e0b;
        }
        .status-created {
            background-color: #10b981;
        }
        .status-duplicate {
            background-color: #6b7280;
        }
        .status-failed {
            background-color: #ef4444;
        }
        .status-pushing {
            background-color: #3b82f6;
            animation: pulse 2s infinite;
        }
        .status-success {
            background-color: #10b981;
        }
        @keyframes pulse {
            0%, 100% {
                opacity: 1;
            }
            50% {
                opacity: 0.5;
            }
        }
        .collapse-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
        }
        .collapse-content.expanded {
            max-height: 1000px;
        }
        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            transition: all 0.3s ease;
        }
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
        }
        .btn-success {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            transition: all 0.3s ease;
        }
        .btn-success:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(16, 185, 129, 0.3);
        }
        .btn-danger {
            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
            transition: all 0.3s ease;
        }
        .btn-danger:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(239, 68, 68, 0.3);
        }
        .btn-secondary {
            background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
            transition: all 0.3s ease;
        }
        .btn-secondary:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(107, 114, 128, 0.3);
        }
        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }
        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
            transition: .4s;
            border-radius: 34px;
        }
        .slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }
        input:checked + .slider {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        }
        input:checked + .slider:before {
            transform: translateX(26px);
        }
        .card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
            transition: all 0.3s ease;
        }
        .card:hover {
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
            transform: translateY(-2px);
        }
        .subscription-item {
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            margin-bottom: 16px;
            transition: all 0.3s ease;
        }
        .subscription-item:hover {
            border-color: #3b82f6;
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
        }
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
        }
        .modal.show {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .modal-content {
            background: white;
            border-radius: 12px;
            padding: 24px;
            max-width: 500px;
            width: 90%;
            max-height: 80vh;
            overflow-y: auto;
        }
        .toast {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1100;
            min-width: 300px;
            padding: 16px;
            border-radius: 8px;
            font-weight: 500;
            transform: translateX(120%);
            transition: transform 0.3s ease;
        }
        .toast.show {
            transform: translateX(0);
        }
        .toast.success {
            background-color: #d1fae5; /* 浅绿色 */
            border: 1px solid #34d399; /* 绿色边框 */
            color: #065f46; /* 深绿色文字 */
        }
        .toast.error {
            background-color: #fee2e2; /* 浅红色 */
            border: 1px solid #f87171; /* 红色边框 */
            color: #991b1b; /* 深红色文字 */
        }
        .toast.info {
            background-color: #dbeafe; /* 浅蓝色 */
            border: 1px solid #60a5fa; /* 蓝色边框 */
            color: #1e40af; /* 深蓝色文字 */
        }
        .dropdown {
            position: relative;
            display: inline-block;
        }
        .dropdown-content {
            display: none;
            position: absolute;
            right: 0;
            background-color: white;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            border-radius: 6px;
            z-index: 1;
            border: 1px solid #e5e7eb;
        }
        .dropdown-content button {
            display: block;
            width: 100%;
            text-align: left;
            padding: 8px 12px;
            border: none;
            background: none;
            cursor: pointer;
            font-size: 14px;
        }
        .dropdown-content button:hover {
            background-color: #f3f4f6;
        }
        .dropdown.show .dropdown-content {
            display: block;
        }
        .stat-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 12px;
            padding: 20px;
            text-align: center;
            transition: all 0.3s ease;
        }
        .stat-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 30px rgba(102, 126, 234, 0.3);
        }
        .progress-bar {
            background-color: #e5e7eb;
            border-radius: 10px;
            overflow: hidden;
            height: 8px;
        }
        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #10b981, #059669);
            transition: width 0.3s ease;
        }
        .icon-active {
            color: #10b981; /* 绿色 */
            animation: icon-pulse 1.5s infinite; /* 闪烁动画 */
        }
        .icon-inactive {
            color: #ef4444; /* 红色 */
        }
        @keyframes icon-pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        
        /* 订阅项紧凑样式 */
        .subscription-item .text-sm {
            line-height: 1.3;
        }
        .subscription-item .text-xs {
            line-height: 1.2;
        }
        .subscription-item button {
            min-height: 24px;
        }
        .subscription-item .dropdown-content {
            min-width: 140px;
        }
        .subscription-item .dropdown-content button {
            padding: 6px 10px;
            font-size: 12px;
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen">
    <!-- 系统状态栏 -->
    <div class="bg-white shadow-sm border-b">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between h-16">
                <div class="flex items-center">
                    <h1 class="text-xl font-bold text-gray-900">
                        <i class="fas fa-video mr-2 text-blue-600"></i>
                        影视订阅下载管理系统
                    </h1>
                </div>
                <div class="flex items-center space-x-6 text-sm">
                    <div class="flex items-center">
                        <span class="status-indicator" id="scheduler-status"></span>
                        <span>定时任务: <span id="scheduler-text" class="font-medium">关闭</span></span>
                    </div>
                    <div class="flex items-center">
                        <span class="status-indicator" id="auto-download-status"></span>
                        <span>全局自动下载: <span id="auto-download-text" class="font-medium">关闭</span></span>
                    </div>
                    <div class="flex items-center">
                        <i class="fas fa-rss text-blue-600 mr-2"></i>
                        <span>活跃订阅: <span id="active-subscriptions" class="font-medium">0</span>个</span>
                    </div>
                    <div class="flex items-center">
                        <i class="fas fa-download text-green-600 mr-2"></i>
                        <span>已下载: <span id="pending-downloads" class="font-medium">0</span>个</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <!-- 标签页导航 -->
        <div class="bg-white rounded-lg shadow-sm mb-6">
            <div class="border-b border-gray-200">
                <nav class="-mb-px flex space-x-8 px-6">
                    <button class="tab-button py-4 px-1 border-b-2 font-medium text-sm focus:outline-none transition-colors duration-200 border-blue-500 text-blue-600" 
                            onclick="switchTab('subscriptions')" id="tab-subscriptions">
                        <i class="fas fa-rss mr-2"></i>订阅管理
                    </button>
                    <button class="tab-button py-4 px-1 border-b-2 font-medium text-sm focus:outline-none transition-colors duration-200 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300" 
                            onclick="switchTab('downloads')" id="tab-downloads">
                        <i class="fas fa-download mr-2"></i>下载管理
                    </button>
                    <button class="tab-button py-4 px-1 border-b-2 font-medium text-sm focus:outline-none transition-colors duration-200 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300" 
                            onclick="switchTab('settings')" id="tab-settings">
                        <i class="fas fa-cog mr-2"></i>系统设置
                    </button>
                    <button class="tab-button py-4 px-1 border-b-2 font-medium text-sm focus:outline-none transition-colors duration-200 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300" 
                            onclick="switchTab('status')" id="tab-status">
                        <i class="fas fa-chart-line mr-2"></i>系统状态
                    </button>
                </nav>
            </div>
        </div>

        <!-- 订阅管理标签页 -->
        <div id="subscriptions" class="tab-content active">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <!-- 添加订阅表单 -->
                <div class="lg:col-span-1">
                    <div class="card p-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-4">
                            <i class="fas fa-plus-circle mr-2 text-blue-600"></i>添加订阅
                        </h3>
                        <form id="subscription-form" class="space-y-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">影视名称</label>
                                <input type="text" id="sub-name" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="请输入影视名称" required>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">订阅地址</label>
                                <input type="url" id="sub-url" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="请输入RSS或网页地址" required>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">订阅网站</label>
                                <select id="sub-site" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" required>
                                    <option value="dygod">dygod</option>
                                    <option value="meijutt">meijutt</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">类型</label>
                                <select id="sub-type" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                    <option value="movie">电影</option>
                                    <option value="tv">电视剧</option>
                                    <option value="anime">动漫</option>
                                    <option value="variety">综艺</option>
                                    <option value="documentary">纪录片</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">下载目录</label>
                                <input type="text" id="sub-directory" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="/" value="/">
                            </div>
                            <button type="submit" class="w-full btn-primary text-white py-2 px-4 rounded-md font-medium">
                                <i class="fas fa-plus mr-2"></i>添加订阅
                            </button>
                        </form>
                    </div>
                </div>

                <!-- 订阅列表 -->
                <div class="lg:col-span-2">
                    <div class="card p-6">
                        <div class="flex items-center justify-between mb-4">
                            <h3 class="text-lg font-semibold text-gray-900">
                                <i class="fas fa-list mr-2 text-blue-600"></i>我的订阅
                            </h3>
                            <div class="text-sm text-gray-500">
                                共 <span id="total-subscriptions">0</span> 个订阅
                            </div>
                        </div>
                        <div id="subscriptions-list" class="space-y-2">
                            <!-- 订阅项目将在这里动态生成 -->
                        </div>
                        <div id="subscriptions-pagination"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 下载管理标签页 -->
        <div id="downloads" class="tab-content">
            <div class="card p-6">
                <div class="flex items-center justify-between mb-6">
                    <h3 class="text-lg font-semibold text-gray-900 pl-6">
                        <i class="fas fa-download mr-2 text-blue-600"></i>下载任务管理
                    </h3>
                    <div class="flex items-center space-x-4">
                        <input type="text" id="name-filter" placeholder="按影视名称筛选" class="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" style="width: 180px;" />
                        <select id="status-filter" class="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="all">全部状态</option>
                            <option value="waiting_create">等待创建</option>
                            <option value="created_success">创建成功</option>
                            <option value="created_failed">创建失败</option>
                            <option value="task_duplicate">任务重复</option>
                        </select>
                        <button id="batch-retry-btn" class="btn-primary text-white px-4 py-2 rounded-md font-medium" disabled>
                            <i class="fas fa-redo mr-2"></i>批量重新下载
                        </button>
                    </div>
                </div>
                
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-6 py-3 text-left text-sm font-bold text-gray-700 uppercase tracking-wider">
                                    <input type="checkbox" id="select-all-downloads" class="rounded">
                                </th>
                                <th class="px-6 py-3 text-left text-sm font-bold text-gray-700 uppercase tracking-wider">影视名称</th>
                                <th class="px-6 py-3 text-left text-sm font-bold text-gray-700 uppercase tracking-wider">下载目录</th>
                                <th class="px-6 py-3 text-left text-sm font-bold text-gray-700 uppercase tracking-wider">下载地址</th>
                                <th class="px-6 py-3 text-left text-sm font-bold text-gray-700 uppercase tracking-wider">状态</th>
                                <th class="px-6 py-3 text-left text-sm font-bold text-gray-700 uppercase tracking-wider">创建时间</th>
                                <th class="px-6 py-3 text-left text-sm font-bold text-gray-700 uppercase tracking-wider">操作</th>
                            </tr>
                        </thead>
                        <tbody id="downloads-list" class="bg-white divide-y divide-gray-200">
                            <!-- 下载任务将在这里动态生成 -->
                        </tbody>
                    </table>
                </div>
                
                <!-- 分页 -->
                <div id="downloads-pagination" class="mt-6 flex items-center justify-between">
                    <div class="text-sm text-gray-700">
                        显示第 <span id="page-start">1</span> 到 <span id="page-end">20</span> 条，共 <span id="total-downloads">0</span> 条记录
                    </div>
                    <div class="flex items-center space-x-2">
                        <button id="prev-page" class="px-2 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50" disabled>上一页</button>
                        <span id="page-info" class="mx-2 text-gray-600 text-sm">第 1 / 1 页</span>
                        <button id="next-page" class="px-2 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50" disabled>下一页</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 系统设置标签页 -->
        <div id="settings" class="tab-content">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <!-- 定时任务设置 -->
                <div class="card p-6">
                    <h3 class="text-lg font-semibold text-gray-900 mb-4">
                        <i class="fas fa-clock mr-2 text-blue-600"></i>定时任务设置
                    </h3>
                    <div class="space-y-6">
                        <div class="flex items-center justify-between">
                            <div>
                                <label class="text-sm font-medium text-gray-700">全局定时任务</label>
                                <p class="text-xs text-gray-500">开启后将按设定间隔自动爬取所有活跃订阅</p>
                            </div>
                            <label class="toggle-switch">
                                <input type="checkbox" id="scheduler-toggle">
                                <span class="slider"></span>
                            </label>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">爬取时间间隔（分钟）</label>
                            <div class="flex items-center space-x-2">
                                <input type="number" id="crawl-interval" min="1" max="1440" value="60" 
                                       class="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                <button id="update-interval-btn" class="btn-primary text-white px-4 py-2 rounded-md font-medium">
                                    <i class="fas fa-save mr-2"></i>保存
                                </button>
                            </div>
                            <p class="text-xs text-gray-500 mt-1">范围：1-1440分钟</p>
                        </div>
                    </div>
                </div>

                <!-- 下载设置 -->
                <div class="card p-6">
                    <h3 class="text-lg font-semibold text-gray-900 mb-4">
                        <i class="fas fa-download mr-2 text-blue-600"></i>下载设置
                    </h3>
                    <div class="space-y-6">
                        <div class="flex items-center justify-between">
                            <div>
                                <label class="text-sm font-medium text-gray-700">全局自动下载</label>
                                <p class="text-xs text-gray-500">开启后新爬取的内容将自动推送到下载器</p>
                            </div>
                            <label class="toggle-switch">
                                <input type="checkbox" id="auto-download-toggle">
                                <span class="slider"></span>
                            </label>
                        </div>
                    </div>
                </div>
                <!-- 迅雷NAS配置 (新增) -->
                <div class="card p-6">
                    <h3 class="text-lg font-semibold text-gray-900 mb-4">
                        <i class="fas fa-hdd mr-2 text-blue-600"></i>迅雷配置(飞牛fnOS版)
                    </h3>

                    <!-- 配置状态指示器 -->
                    <div class="bg-green-50 border border-green-200 rounded-lg p-3 mb-4" id="xunlei-status-indicator">
                        <div class="flex items-center">
                            <div class="flex-shrink-0">
                                <i class="fas fa-check-circle text-green-600" id="xunlei-status-icon"></i>
                            </div>
                            <div class="ml-3">
                                <p class="text-sm font-medium text-green-800" id="xunlei-status-text">未配置</p>
                                <p class="text-xs text-green-700" id="xunlei-status-time"></p>
                            </div>
                        </div>
                    </div>

                    <form id="xunleinas-form" class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">主机地址</label>
                            <input type="text" id="xunleinas-host"
                                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                   placeholder="例如: http://192.168.1.100:9000">
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">授权凭证</label>
                            <div class="relative">
                                <input type="password" id="xunleinas-credential"
                                       class="w-full px-3 py-2 pr-10 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                       placeholder="您的迅雷NAS授权凭证">
                                <button type="button" onclick="togglePassword('xunleinas-credential')"
                                        class="absolute inset-y-0 right-0 pr-3 flex items-center">
                                    <i class="fas fa-eye text-gray-400 hover:text-gray-600"></i>
                                </button>
                            </div>
                        </div>

                        <div class="grid grid-cols-2 gap-3">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">初始目录ID</label>
                                <input type="text" id="xunleinas-initial-dir-id"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                       placeholder="0">
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">设备空间ID</label>
                                <input type="text" id="xunleinas-device-space-id"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                       placeholder="1">
                            </div>
                        </div>

                        <!-- 操作按钮 -->
                        <div class="flex items-center justify-between pt-4 border-t">
                            <button type="button" onclick="testXunleiConnection()"
                                    class="btn-success text-white px-3 py-2 rounded-md font-medium text-sm">
                                <i class="fas fa-plug mr-1"></i>连接测试
                            </button>

                            <button type="submit" id="save-xunleinas-config-btn"
                                    class="btn-primary text-white px-4 py-2 rounded-md font-medium">
                                <i class="fas fa-save mr-2"></i>保存配置
                            </button>
                        </div>
                    </form>
                </div>

                <!-- 版本信息 -->
                <div class="card p-6">
                    <h3 class="text-lg font-semibold text-gray-900 mb-4">
                        <i class="fas fa-info-circle mr-2 text-blue-600"></i>版本信息
                    </h3>
                    <div class="space-y-6">
                        <!-- 软件信息 -->
                        <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                            <h4 class="text-sm font-semibold text-blue-800 mb-3">
                                <i class="fas fa-info-circle mr-2"></i>软件信息
                            </h4>
                            <div class="grid grid-cols-2 gap-4 text-sm">
                                <div>
                                    <span class="text-gray-600">软件版本:</span>
                                    <span class="font-medium text-gray-900 ml-2" id="software-version"></span>
                                </div>
                                <div>
                                    <span class="text-gray-600">作者:</span>
                                    <span class="font-medium text-gray-900 ml-2" id="software-author">ufohacker@foxmail.com</span>
                                </div>
                                <div>
                                    <span class="text-gray-600">构建日期:</span>
                                    <span class="font-medium text-gray-900 ml-2" id="build-date"></span>
                                </div>
                                <div>
                                    <span class="text-gray-600">许可证:</span>
                                    <span class="font-medium text-gray-900 ml-2" id="license"></span>
                                </div>
                            </div>
                        </div>



                        <!-- 授权信息 -->
                        <div class="bg-purple-50 border border-purple-200 rounded-lg p-4">
                            <h4 class="text-sm font-semibold text-purple-800 mb-3">
                                <i class="fas fa-key mr-2"></i>授权信息
                            </h4>
                            <div class="grid grid-cols-2 gap-4 text-sm">
                                <div>
                                    <span class="text-gray-600">序列号码:</span>
                                    <span class="font-medium text-gray-900 ml-2" id="device-serial">VS-2024-001</span>
                                </div>
                                <div>
                                    <span class="text-gray-600">激活状态:</span>
                                    <span class="font-medium text-green-600 ml-2" id="activation-status">已激活</span>
                                </div>
                                <div>
                                    <span class="text-gray-600">激活日期:</span>
                                    <span class="font-medium text-gray-900 ml-2" id="activation-date">2024-01-15</span>
                                </div>
                                <div>
                                    <span class="text-gray-600">到期日期:</span>
                                    <span class="font-medium text-gray-900 ml-2" id="expiry-date">永久有效</span>
                                </div>
                            </div>
                        </div>

                        <!-- 网络信息 -->
                        <div class="bg-orange-50 border border-orange-200 rounded-lg p-4">
                            <h4 class="text-sm font-semibold text-orange-800 mb-3">
                                <i class="fas fa-network-wired mr-2"></i>网络信息
                            </h4>
                            <div class="grid grid-cols-2 gap-4 text-sm">
                                <div>
                                    <span class="text-gray-600">本地IP:</span>
                                    <span class="font-medium text-gray-900 ml-2" id="local-ip">192.168.1.100</span>
                                </div>
                                <div>
                                    <span class="text-gray-600">公网IP:</span>
                                    <span class="font-medium text-gray-900 ml-2" id="public-ip">获取中...</span>
                                </div>
                                <div>
                                    <span class="text-gray-600">网络状态:</span>
                                    <span class="font-medium text-green-600 ml-2" id="network-status">正常</span>
                                </div>
                                <div>
                                    <span class="text-gray-600">端口:</span>
                                    <span class="font-medium text-gray-900 ml-2" id="server-port">5000</span>
                                </div>
                            </div>
                        </div>


                    </div>
                </div>
            </div>
        </div>


        <!-- 系统状态标签页 -->
        <div id="status" class="tab-content">
            <div class="space-y-6">
                <!-- 系统概览 -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                    <div class="stat-card">
                        <div class="text-2xl font-bold" id="stat-subscriptions">0</div>
                        <div class="text-sm opacity-90">总订阅数</div>
                    </div>
                    <div class="stat-card">
                        <div class="text-2xl font-bold" id="stat-downloads">0</div>
                        <div class="text-sm opacity-90">总下载任务</div>
                    </div>
                    <div class="stat-card">
                        <div class="text-2xl font-bold" id="stat-success-rate">0%</div>
                        <div class="text-sm opacity-90">成功率</div>
                    </div>
                    <div class="stat-card">
                        <div class="text-2xl font-bold" id="stat-today-crawls">0</div>
                        <div class="text-sm opacity-90">今日爬取</div>
                    </div>
                </div>

                <!-- 详细状态 -->
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <!-- 系统信息 -->
                    <div class="card p-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-4">
                            <i class="fas fa-server mr-2 text-blue-600"></i>系统信息
                        </h3>
                        <div class="space-y-4">
                            <div>
                                <div class="flex justify-between text-sm mb-1">
                                    <span>CPU使用率</span>
                                    <span id="cpu-percent">0%</span>
                                </div>
                                <div class="progress-bar">
                                    <div class="progress-fill" id="cpu-progress" style="width: 0%"></div>
                                </div>
                            </div>
                            <div>
                                <div class="flex justify-between text-sm mb-1">
                                    <span>内存使用率</span>
                                    <span id="memory-percent">0%</span>
                                </div>
                                <div class="progress-bar">
                                    <div class="progress-fill" id="memory-progress" style="width: 0%"></div>
                                </div>
                            </div>
                            <div>
                                <div class="flex justify-between text-sm mb-1">
                                    <span>磁盘使用率</span>
                                    <span id="disk-percent">0%</span>
                                </div>
                                <div class="progress-bar">
                                    <div class="progress-fill" id="disk-progress" style="width: 0%"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 任务状态 -->
                    <div class="card p-6">
                        <h3 class="text-lg font-semibold text-gray-900 mb-4">
                            <i class="fas fa-tasks mr-2 text-blue-600"></i>任务状态
                        </h3>
                        <div class="space-y-3">
                            <div class="flex justify-between items-center">
                                <span class="text-sm text-gray-600">等待创建</span>
                                <span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full text-xs font-medium" id="waiting-count">0</span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span class="text-sm text-gray-600">创建成功</span>
                                <span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs font-medium" id="created-count">0</span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span class="text-sm text-gray-600">任务重复</span>
                                <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs font-medium" id="duplicate-count">0</span>
                            </div>
                            <div class="flex justify-between items-center">
                                <span class="text-sm text-gray-600">创建失败</span>
                                <span class="bg-red-100 text-red-800 px-2 py-1 rounded-full text-xs font-medium" id="failed-count">0</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 编辑订阅模态框 -->
    <div id="edit-modal" class="modal">
        <div class="modal-content">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold text-gray-900">编辑订阅</h3>
                <button onclick="closeEditModal()" class="text-gray-400 hover:text-gray-600">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <form id="edit-form" class="space-y-4">
                <input type="hidden" id="edit-id">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">影视名称</label>
                    <input type="text" id="edit-name" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">订阅地址</label>
                    <input type="url" id="edit-url" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">订阅网站</label>
                    <select id="edit-site" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
                        <option value="dygod">dygod</option>
                        <option value="meijutt">meijutt</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">类型</label>
                    <select id="edit-type" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <option value="movie">电影</option>
                        <option value="tv">电视剧</option>
                        <option value="anime">动漫</option>
                        <option value="variety">综艺</option>
                        <option value="documentary">纪录片</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">下载目录</label>
                    <input type="text" id="edit-directory" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div class="flex space-x-3 pt-4">
                    <button type="submit" class="flex-1 btn-primary text-white py-2 px-4 rounded-md font-medium">
                        <i class="fas fa-save mr-2"></i>保存
                    </button>
                    <button type="button" onclick="closeEditModal()" class="flex-1 btn-secondary text-white py-2 px-4 rounded-md font-medium">
                        <i class="fas fa-times mr-2"></i>取消
                    </button>
                </div>
            </form>
        </div>
    </div>
    <!-- Custom Confirmation Modal (新增) -->
    <div id="confirm-modal" class="modal">
        <div class="modal-content">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold text-gray-900">确认删除</h3>
                <button onclick="closeConfirmModal(false)" class="text-gray-400 hover:text-gray-600">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <p class="text-gray-700 mb-6" id="confirm-message">确定要删除这个订阅吗？此操作不可恢复。</p>
            <div class="flex space-x-3 pt-4">
                <button type="button" id="confirm-delete-btn" class="flex-1 btn-danger text-white py-2 px-4 rounded-md font-medium">
                    确认
                </button>
                <button type="button" onclick="closeConfirmModal(false)" class="flex-1 btn-secondary text-white py-2 px-4 rounded-md font-medium">
                    <i class="fas fa-times mr-2"></i>取消
                </button>
            </div>
        </div>
    </div>
    <!-- Toast 通知 -->
    <div id="toast" class="toast">
        <div id="toast-message"></div>
    </div>

    <script src="app.js"></script>
</body>
</html>

